<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Area Calculator</title>

    <!-- Import scripts -->
 
    <script src="../assets/js/Geometry Shapes/shape.js"></script>
    <script src="../assets/js/Geometry Shapes/4shapes.js"></script>
    <script src="../assets/js/Geometry Shapes/Geometry_Shapes_claculator.js"></script>

    <!-- Import stylesheets -->
    <link rel="stylesheet" href="../assets/css/index.css" />
    
    <!-- Import favicons -->
    <link rel="apple-touch-icon" sizes="57x57" href="favicon/apple-icon-57x57.png" />
    <link rel="apple-touch-icon" sizes="60x60" href="favicon/apple-icon-60x60.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="favicon/apple-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="76x76" href="favicon/apple-icon-76x76.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="favicon/apple-icon-114x114.png" />
    <link rel="apple-touch-icon" sizes="120x120" href="favicon/apple-icon-120x120.png" />
    <link rel="apple-touch-icon" sizes="144x144" href="favicon/apple-icon-144x144.png" />
    <link rel="apple-touch-icon" sizes="152x152" href="favicon/apple-icon-152x152.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-icon-180x180.png" />
    <link rel="icon" type="image/png" sizes="192x192" href="favicon/android-icon-192x192.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="96x96" href="favicon/favicon-96x96.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png" />
    <link rel="manifest" href="favicon/manifest.json" />
    <meta name="msapplication-TileColor" content="#ffffff" />
    <meta name="msapplication-TileImage" content="favicon/ms-icon-144x144.png" />
    <meta name="theme-color" content="#ffffff" />
</head>

<body onload="loadShapeButtons();loadInput(0);">
    <!-- The "menu section"; The section on the left of the viewport -->
    <div id="menu_section">
        <script>
            generateMenuTitleBox();
            generateShapeButtonBox();
            generateSettingsBox();
        </script>
    </div>

    <!-- The "input section"; The section on the middle of the website -->
    <div id="input_section"></div>

    <!-- The "output section"; The section on the right of the website -->
    <div id="output_section">
        <div id="output_box"></div>

        <div class="common_box" id="clear_output_button_box">
            <script>
                generateClearOutputBox();
            </script>
        </div>
    </div>
</body>

</html>